<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div><img src="images/bg.png"></div>
    <div><img src="images/girl1.png"></div>
    <div><img src="images/grassland.png"></div>
    <div><img src="images/leaf.png"></div>
    <div><img src="images/mushroom.png"></div>
    <div><img src="images/spirit.png"></div>
</body>

<script>

    const images=document.querySelectorAll('body>div>img')
    console.log(images)
    document.querySelector('body').addEventListener('mousemove',(e)=>{
        let percentage=e.clientX/window.outerWidth
        // console.log(percentage)
        let offset=10*percentage
        let blur=20;
            
        for(let [index,image] of images.entries()){
            
            offset*=1.3
            let blurValue=(Math.pow((index/images.length-percentage),2)*blur)
            // console.log(index/images.length-percentage)
            image.style.setProperty('--offset',`${offset}px`)
            image.style.setProperty('--blur',`${blurValue}px`)

        }
    })
</script>
</html>